<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="70px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="课程名称" prop="curriculumName">
        <el-input v-model="queryParams.curriculumName" placeholder="请输入课程名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="老师" prop="teacherName">
        <el-input v-model="queryParams.teacherName" placeholder="请输入老师" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="销售" prop="salesName">
        <el-input v-model="queryParams.salesName" placeholder="请输入销售" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="统计时间">
        <!-- <el-date-picker is-range clearable size="small" v-model="queryParams.draftTime" type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择起草时间">
        </el-date-picker> -->
        <el-date-picker
          v-model="timeFrame"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="getpickerOptions()">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table v-loading="loading" :data="studentList">

      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="课程" align="center" prop="curriculumName" />
      <el-table-column label="已购课时" align="center" prop="lessonHours" />
      <el-table-column label="已用课时" align="center" prop="yyHours" />
      <el-table-column label="剩余课时" align="center" prop="syHours" />
      <el-table-column label="老师" align="center" prop="teacherName" />
      <el-table-column label="销售" align="center" prop="salesName" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <div class="ewm-v">
      <div class="ewm">
        <div class="ewm-item">
          <div class="ewm-img">
            <div ref="appQRcode" style="display: none;"></div>
            <!-- <el-image :src="require('../assets/images/login/appQrcode.png')"></el-image> -->
            <el-image :src="appQRcodeSrc"></el-image>
          </div>
          <div class="ewm-title">老师端</div>
        </div>
        <div class="ewm-item">
          <div class="ewm-img">
            <div ref="gzhQRcode" style="display: none;"></div>
            <!-- <el-image :src="require('../assets/images/login/gzhQrcode.png')"></el-image> -->
            <el-image :src="gzhQRcodeSrc"></el-image>
          </div>
          <div class="ewm-title">家长端</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { listStudentCurriculum, listStudentCurriculumSales } from "@/api/jiaopei/student";
import QRCode from 'qrcodejs2'
import store from '@/store'
export default {
  name: "Student",
  data() {
    return {
      appQRcodeSrc: '',//app二维码
      gzhQRcodeSrc: '',//公众号二维码
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学员表格数据
      studentList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        salesName: undefined,
        teacherName: undefined,
        curriculumName: undefined
      },
      timeFrame:undefined,
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.getQrcode();
  },
  methods: {
    /** 查询学员列表 */
    getList() {
      this.loading = true;
      var query = JSON.parse(JSON.stringify(this.queryParams));
      if(this.timeFrame){
        query.date1 = this.timeFrame[0];
        query.date2 = this.timeFrame[1];
      }
      
      listStudentCurriculum(query).then(response => {
        this.studentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });


    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.timeFrame = undefined;
      this.handleQuery();
    },
    getQrcode() {
      console.log('生成二维码')
      var that = this;
      let currentDomain = document.location.hostname;


      var apkurl = `${process.env.VUE_APP_BASE_API}/jiaopei/version/updateApk`;
      if (!this.$common.isUrl(apkurl)) {
        apkurl = `${currentDomain}${apkurl}`;
      }

      var weburl = store.getters.qrcodeBaseUrl;

      that.$nextTick(() => {
        that.appQRcode = new QRCode(that.$refs.appQRcode, {
          text: apkurl,
          width: 400,
          height: 400
        })
        this.downImage('appQRcode', require('@/assets/images/app-logo.png'), 'appQRcodeSrc');
        that.gzhQRcode = new QRCode(that.$refs.gzhQRcode, {
          text: weburl,
          width: 400,
          height: 400
        })
        this.downImage('gzhQRcode', require('@/assets/images/app-logo.png'), 'gzhQRcodeSrc');

      })
    },
    downImage(ref, img, field) {
      const logo = document.createElement("img");
      logo.setAttribute("crossOrigin", "Anonymous");
      // logo.src = require(img);
      logo.src = img;
      logo.onload = () => {
        const canvas = this.$refs[ref].querySelector("canvas");
        let cxt = canvas.getContext('2d');
        var multiple = 3;
        const positionWidth = (canvas.width - canvas.width / multiple) / 2;
        const positionHeight = (canvas.height - canvas.height / multiple) / 2;
        const width = canvas.width / multiple;
        const height = canvas.height / multiple;
        cxt.drawImage(logo, positionWidth, positionHeight, width, height);
        const img = canvas.toDataURL("image/png");
        this.$refs[ref].innerHTML = "";
        this[field] = img;
      }
    },
    getpickerOptions() {
			var that = this;
			return {
				shortcuts: [{
					text: '本周',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('week');
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '下周',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('week', 1);
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '上周',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('week', -1);
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '上上周',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('week', -2);
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '本月',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('month');
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '上月',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('month', -1);
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				},
					// {
					// 	text: '本年',
					// 	onClick(picker) {
					// 		var dateRange = that.$common.getDateRangeByType('year');
					// 		const start = dateRange[0];
					// 		const end = dateRange[1];
					// 		picker.$emit('pick', [start, end]);
					// 	}
					// }, 
					// {
					// 	text: '去年',
					// 	onClick(picker) {
					// 		var dateRange = that.$common.getDateRangeByType('year', -1);
					// 		const start = dateRange[0];
					// 		const end = dateRange[1];
					// 		picker.$emit('pick', [start, end]);
					// 	}
					// }
				]
			};
		},
  }
};
</script>
<style lang="scss" scoped>
.ewm-v {
  position: relative;
  right: 0;
}

.ewm {
  height: 120px;
  position: absolute;
  top: 40px;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  color: #707070;

  .ewm-item {
    margin-left: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .ewm-img {
      width: 100px;
      height: 100px;
    }

    .ewm-title {
      margin-top: 5px;
      font-size: 12px;
      
    }
  }
}
</style>